<template>
  <div class>
    <div class="notes text-left" v-if="state.param.feedback_note && !isadd">
      <div class="note-tit">{{ $t("feedback.notes") }}</div>
      <div class="note-content">
        {{ state.param.feedback_note }}
      </div>
    </div>
    <div class="textperson-t2 text-12 text-left mb-12" v-if="state.flag">
      *{{ isadd ? $t("feedback.choice") : $t("feedback.platform") }}
    </div>
    <div class="flex js-sp mb-32" v-if="isadd">
      <div
        v-for="item in state.platform"
        :key="item.name"
        @click="choicePlat(item.name)"
        class="platform flex js-st align-center downt1 text-12"
        :class="
          state.param.platform_name === item.name
            ? 'bg-yellow'
            : 'borderBase-bg'
        "
      >
        <img :src="item.icon" alt />
        {{ item.name }}
      </div>
    </div>
    <div class="flex js-sp mb-32" v-if="!isadd && state.flag">
      <div
        v-for="item in state.platform"
        :key="item.name"
        v-show="state.param.platform_name === item.name"
      >
        <div class="platform flex js-st align-center downt1 text-12 bg-yellow">
          <img :src="item.icon" alt />
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="text-12 textperson-t2 text-left mb-12">Device</div>
    <div style="width:340px" class="mb-32">
      <el-input
        v-model="state.param.feedback_device"
        :disabled="!isadd"
        :placeholder="$t('feedback.endevice')"
      ></el-input>
    </div>
    <div class="text-12 textperson-t2 text-left mb-12">
      *{{ $t("feedback.title") }}
    </div>
    <div class="mb-32">
      <el-input
        v-model="state.param.feedback_title"
        :placeholder="$t('feedback.entitle')"
        :disabled="!isadd"
        show-word-limit
        maxlength="30"
      ></el-input>
    </div>
    <div class="text-12 textperson-t2 text-left mb-12">
      *{{ $t("feedback.content") }}
    </div>
    <div class="mb-32">
      <el-input
        type="textarea"
        :placeholder="$t('feedback.encontent')"
        :disabled="!isadd"
        v-model="state.param.feedback_information"
        maxlength="300"
        show-word-limit
      ></el-input>
    </div>
    <div class="text-12 textperson-t2 mb-12 text-left">
      {{ $t("feedback.annex") }}
    </div>
    <div class="project flex js-st">
      <div
        class="image-box point"
        v-for="(item, index) in state.upload"
        :key="item.id"
      >
        <img :src="item.source_url" alt v-if="item.source_type == 1" />
        <div @click="showVideo(item.source_url)" class="video-box">
          <video
            :src="item.source_url"
            v-if="item.source_type == 2"
            width="100"
            height="100"
            style="margin-inline-end: 8px;"
          ></video>
          <div class="paly-box">
            <img src="@/assets/images/play.png" alt="" srcset="" class="play" />
          </div>
        </div>
        <div class="downt3 text-10" v-if="item.source_type == 1">.png</div>
        <div class="downt3 text-10" v-if="item.source_type == 2">.mp4</div>
        <div
          class="image-shadow flex js-ct text-20"
          @click="delate(index)"
          v-if="isadd"
        >
          <i class="el-icon-delete share-color"></i>
        </div>
      </div>
      <div class v-if="state.upload.length < 5 && isadd">
        <el-upload
          accept
          :action="state.uploadUrl"
          :show-file-list="false"
          :on-success="handlePicture"
          :before-upload="beforeUpload"
        >
          <div class="upload-box flex js-ct">
            <i class="el-icon-plus text-30"></i>
          </div>
        </el-upload>
      </div>
    </div>
    <div
      class="share-color btn radius person-btn point"
      v-if="isadd"
      v-loading="state.loading"
      @click="submit"
    >
      {{ $t("feedback.submit") }}
    </div>
    <!-- 播放视频 -->
    <el-dialog
      @close="confirm"
      v-model="state.dialogVisible"
      :show-close="false"
    >
      <div class="center">
        <video
          :src="state.video"
          style="width: 100% ;padding:30px 10px;box-sizing: border-box"
          controls
        ></video>
      </div>
      <div class="flex_end buble-t1">
        <div class="letter-btn acbtn point" @click="confirm">
          {{ $t("formTip.comfirm") }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, watch } from "vue";
import { addFeedback, userFeedbackDetails } from "@/api/article";
import { ElMessage } from "element-plus";
import { LoginInterception } from "@/utils/common";
import { useI18n } from "vue-i18n";
export default {
  name: "opinion",
  props: {
    isadd: Boolean,
    detailID: Number,
  },
  setup(props, { emit }) {
    const state = reactive({
      video: null,
      dialogVisible: false,
      platform: [
        { name: "iOS", icon: require("@/assets/images/ios.png") },
        { name: "Android", icon: require("@/assets/images/androd.png") },
        { name: "web", icon: require("@/assets/images/web.png") },
      ],
      upload: [],
      loading: false,
      uploadUrl: window.VUE_APP_API + "/file/upload",
      param: {
        platform_name: "web",
      },
      flag: false,
    });
    /**
     * mthods
     */
    onMounted(() => {
      if (!props.isadd) {
        getDetail({ id: props.detailID });
        state.flag = false;
      }
    });
    const { t } = useI18n();
    watch(
      () => props.isadd,
      (val) => {
        if (val) {
          state.param = {
            platform_name: "web",
          };
        }
      }
    );
    // 选择平台
    const choicePlat = (name) => {
      state.param.platform_name = name;
    };
    const submit = () => {
      if (!state.param.feedback_title) {
        ElMessage.error(t("feedback.entitle"));
        return;
      }
      if (!state.param.feedback_information) {
        ElMessage.error(t("feedback.encontent"));
        return;
      }
      let accessory_dtolist = [];
      if (state.upload.length > 0) {
        accessory_dtolist = state.upload.map((item) => {
          return { resource_id: item.id };
        });
      }
      state.param.accessory_dtolist = accessory_dtolist;
      state.loading = true;
      LoginInterception("/opinion")
        .then(() => {
          addFeedback(state.param)
            .then((res) => {
              state.loading = false;
              if (res.code === 200) {
                ElMessage.success(res.message);
                emit("success", { active: 2 });
              } else {
                ElMessage.error(res.message);
              }
            })
            .catch(() => {
              state.loading = false;
            });
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // 获取详情
    const getDetail = (param) => {
      userFeedbackDetails(param).then((res) => {
        state.param = res.data;
        state.upload = res.data.user_feedback_accessory_v_o_list;
        state.platform.forEach((ele) => {
          if (ele.name === res.data.platform_name) {
            state.flag = true;
          }
        });
      });
    };
    // 删除
    const delate = (i) => {
      state.upload.splice(i, 1);
    };
    const confirm = () => {
      state.video = null;
      state.dialogVisible = false;
    };
    const showVideo = (url) => {
      state.video = url;
      state.dialogVisible = true;
    };
    const beforeUpload = (file) => {
      console.log(file);
      let index = file.type.lastIndexOf("/");
      //获取后缀
      let ext = file.type.substr(index + 1);
      if (!isAssetTypeAnImage(ext) && !isAssetTypeAnVideo(ext)) {
        return false;
      }
    };
    // 判断是否是图片
    const isAssetTypeAnImage = (ext) => {
      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext.toLowerCase()) !== -1
      );
    };
    // 判断是否是视频
    const isAssetTypeAnVideo = (ext) => {
      return ["mp4", "webm", "ogg"].indexOf(ext.toLowerCase()) !== -1;
    };
    const handlePicture = (res) => {
      let index = res.data.source_url.lastIndexOf(".");
      //获取后缀
      let ext = res.data.source_url.substr(index + 1);
      if (isAssetTypeAnImage(ext)) {
        res.data.source_type = 1;
      } else if (isAssetTypeAnVideo(ext)) {
        res.data.source_type = 2;
      }
      state.upload.push(res.data);
      console.log(state.upload);
    };
    return {
      state,
      submit,
      choicePlat,
      handlePicture,
      getDetail,
      delate,
      isAssetTypeAnImage,
      isAssetTypeAnVideo,
      confirm,
      showVideo,
      beforeUpload,
    };
  },
};
</script>

<style lang="less" scoped>
.mb-12 {
  margin-bottom: 12px;
}
.mb-32 {
  margin-bottom: 32px;
}
.platform {
  width: 192px;
  height: 37px;
  border-radius: 11px;
  padding-inline-start: 47px;
  box-sizing: border-box;
  img {
    width: 20px;
    height: 23px;
    margin-inline-end: 34px;
  }
}
.project {
  height: 100px;
  margin-bottom: 60px;
}
.btn {
  width: 340px;
  height: 46px;
  line-height: 46px;
  margin: 0 auto;
}
.image-box {
  width: 100px;
  height: 122px;
  margin-inline-end: 30px;
  position: relative;
  img {
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
  }
}
.image-box:hover .image-shadow {
  display: block;
}
.image-shadow {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  line-height: 100px;
  background: rgba(1, 1, 1, 0.5);
  z-index: 5;
}
.upload-box {
  width: 100px;
  height: 100px;
  background: #f6f6f6;
  color: #e3e3e3;
  i {
    line-height: 100px;
  }
}
.bg-yellow {
  background: @yellow;
}
.flex_end {
  display: flex;
  justify-content: flex-end;
}
.letter-btn {
  padding: 10px 15px;
  border-radius: 10px;
}
.video-box {
  z-index: 2;
  position: relative;
  video {
    z-index: 1;
  }
  .paly-box {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    .play {
      width: 32px;
      height: 32px;
      z-index: 4;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-16px, -16px);
    }
  }
}
.notes {
  background: #f8f8f8;
  border-radius: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin-bottom: 32px;
  font-size: 12px;
  line-height: 17px;
  .note-tit {
    color: #2e96f7;
    margin-bottom: 10px;
  }
  .note-content {
    color: #121212;
  }
}
</style>
